<template>
	<view>
		<mescroll-body-diy ref="mescrollRef" @init="mescrollInit" top="0" :down="downOption" @down="downCallback"
			@up="upCallback">

			<view v-if="!isNull" class='item' v-for="(item,index) in MessageToList">
				<image :src="item.fromUserImage" class="avatar" @click='goDetail(item.id)'></image>
				<view style="flex:1;margin-left:10px;" @click='goDetail(item.id,item.role)'>
					<view class="info" style="margin-bottom: 10px;">
						<view class="title">{{item.fromUserName}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="info">
						<view class="desc">{{item.content}}</view>
						<view class="opt" :class="item.status==0?'colorRed':''">{{item.status==1?'已读':'待查看'}}</view>
					</view>
				</view>
			</view>

			<view v-if="isNull" class="cart_null">
				<image src="../../static/xiaoxi@2x.png" mode=""></image>
				<text>暂时还没有通知消息~</text>
			</view>
			<!-- </scroll-view> -->
		</mescroll-body-diy>
	</view>
</template>

<script>
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/xinlang/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBodyDiy
		},
		computed: mapState(['loginState', 'uerInfo']),
		data() {
			return {
				//status  0:待查收  1:已读 
				dataList: [],
				isNull: false,
				orderHeight: '',
				MessageToList: [],
				pageNum: 1,
				pageSize: 20,
				hasNextPage: true,
				downOption: {
					auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				shopId:'',
			}
		},
		onShow() {
			this.shopId = uni.getStorageSync('shopId')
			// if (!this.loginState) {
			// 	uni.navigateTo({
			// 		url: '../mine/auth'
			// 	})
			// }
			
		},
	
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(0)
					//windoHeight为窗口高度，主要使用的是这个
				}
			})
			
		},
		methods: {
			
			downCallback() {
				this.pageNum = 1
				this.$api.getMessageToList({
					shopId:this.shopId
				}, this.pageNum, this.pageSize).then((res) => {
					if (res.data.code == 200) {
						this.MessageToList = []
						this.MessageToList = this.MessageToList.concat(res.data.dataMap.list)
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.pageNum++
						this.mescroll.endSuccess(this.MessageToList.length, this.hasNextPage);
					}
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$api.getMessageToList({
					shopId:this.shopId
				}, this.pageNum, this.pageSize).then((res) => {
					if (res.data.code == 200) {
						this.MessageToList = this.MessageToList.concat(res.data.dataMap.list)
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.mescroll.endSuccess(this.MessageToList.length, this.hasNextPage);
						this.pageNum++
						console.log("====" + this.MessageToList.length)
					}
				}).catch(() => {
					this.mescroll.endErr();
				})


			},


			//下拉刷新

			nextPage() {
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					console.log(this.pageNum)
					this.$api.getMessageToList({
						shopId:this.shopId
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							console.log(res.data)
							var arr = res.data.dataMap.list
							for (var i = 0; i < arr.length; i++) {
								this.MessageToList.push(arr[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
						}
					})
				}


			},
			getMessageToList() {
				this.pageNum = 1
				this.$api.getMessageToList({
					shopId:this.shopId
				}, this.pageNum, this.pageSize).then((res) => {
					if (res.data.code == 200) {
						var arr = res.data.dataMap.list

						console.log(arr)
						this.MessageToList = arr
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.MessageToList.length == 0 ? true : false
					}
				})
			},
			goDetail(id, role) {

				uni.navigateTo({
					url: "detail?id=" + id
				})
				uni.navigateTo({
					url: 'detail?id=' + id + '&role=' + role,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background-color: rgb(250, 247, 250);
	}

	.item {
		background-color: white;
		padding: 10px;
		margin: 10px;
		box-sizing: border-box;
		display: flex;
		border-radius: 5px;

		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}

	.title {
		font-weight: bold;
	}

	.info {
		display: flex;
		justify-content: space-between;
	}

	.desc {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: gray
	}

	.time {
		color: gray;
		font-size: 24rpx;
	}

	.opt {
		font-size: 26rpx;
	}

	.cart_null {
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.cart_null text {
		margin: 0 auto;
		color: #666666;
	}

	.cart_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}
</style>
